<!--
/**
* Author: txj
* Date: 2023年10月20日14:29:17
* Desc: 选择发卡影院
*/
-->
<template>
  <yy-page :linear-bg="true">
    <view class="film-page">
      <!-- #ifdef MP-WEIXIN || MP-ALIPAY-->
      <yy-navbar :border="false" :title="title" left-icon-color="#fff" title-color="#fff" :auto-back="true"></yy-navbar>
      <!-- #endif-->
      <city-choose ext-class="city-choose" :city="areaInfo && areaInfo.regionName"></city-choose>
      <view class="search">
        <view class="input">
          <u-input class="uipt" placeholder="搜索影城" v-model="cinemaName" type="text" clearable />
        </view>
        <view class="bind-btn" @click="searchCinema()">搜索</view>
      </view>
      <view class="film-content">
        <view v-for="item in resultList" :key="item.cinemaId">
          <view
            class="cinema-item"
            v-if="showCinema(item)"
            :class="cinemaInfo && cinemaInfo.cinemaId == item.cinemaId ? 'cinema-item-check' : ''"
            @click.native="chooseCinema(item)"
          >
            <view class="flex mb25 flex-bottom">
              <view class="ell fb fs32 w7">{{ item.cinemaName }}</view>
            </view>
            <view class="flex flex-m mb15">
              <view class="ell w6 fc8 fs26"> {{ item.address }}</view>
              <view class="fc8 flex-right fs26">{{ item.distance | getDistanceTxt }} </view>
            </view>
          </view>
        </view>
      </view>
      <view class="mlr20">
        <yy-button custom-class="bc-primary" @click="select" custom-style="height:100rpx">确定</yy-button>
      </view>
    </view>
    <!-- 定位location-bar -->
  </yy-page>
</template>

<script>
  import CityChoose from './components/CityChoose.vue'
  import sharePage from '@/mixins/sharePage'
  export default {
    name: '',
    components: {
      CityChoose
    },
    mixins: [sharePage],
    data() {
      return {
        isShow: false,
        activeStyle: { color: '#3BC5D2' },
        itemStyle: {
          'font-size': '24rpx',
          height: '40px',
          padding: '0 40rpx 0 0'
        },
        query: {},
        search: {
          timeId: '', // 时段信息
          hallTypeId: '', // 影厅类型信息
          lineId: '', // 院线信息
          cinemaTagId: '', // 标签信息
          sort: '', // 最近
          countyId: '',
          planDate: '',
          filmCode: ''
        },
        title: '选择影院',
        current: 0,
        noScheduling: false,
        dateList: [],
        list: [], // 影院
        filmCode: null,
        areaInfo: null,
        cinemaInfo: null,
        cinemaName: '',
        selectCinemaName: ''
      }
    },
    computed: {
      resultList() {
        const list = this.$utils.sortList(this.list, 'distance')
        return list
      }
    },
    onLoad(options) {},
    async onShow() {
      if (this.areaInfo && this.areaInfo.cityId !== this.$auth.getChooseAreaInfo().cityId) {
        this.cinemaInfo = null
      }
      this.areaInfo = this.$auth.getChooseAreaInfo()
      this.$nextTick(() => {
        console.log('init')
        this.init()
      })
    },
    onReady() {
      // #ifdef H5
      document.title = this.title
      // this.$utils.createTitle(this.query.filmName)
      // #endif
    },
    methods: {
      //初始化方法
      init() {
        this.noScheduling = false

        const search = { ...this.search, ...this.query }
        const locationAreaInfo = this.$auth.getLoctionAreaInfo() || {}
        if (locationAreaInfo.cityId === this.areaInfo.cityId && locationAreaInfo.lng) {
          //选择与真实定位相同
          search.longitude = locationAreaInfo.lng.toString()
          search.latitude = locationAreaInfo.lat.toString()
        }
        this.getCinemaList(search)
      },
      getCinemaList(search) {
        uni.$api.cinema.cinemaList(search).then((res) => {
          const { lat, lng } = this.$auth.getLoctionAreaInfo()
          this.list = res.map((i) => {
            i.distance = this.$utils.getDistance(lat, lng, i.latitude, i.longitude) // 计算距离
            return i
          })
          this.noScheduling = res.length === 0
        })
      },
      handleChange(e) {
        this.search.planDate = e.value
        this.handleSearch()
      },
      handleSearch() {
        const search = { ...this.search, ...this.query }
        this.getCinemaList(search)
      },
      chooseCinema(item) {
        this.cinemaInfo = item
      },
      searchCinema() {
        this.selectCinemaName = this.cinemaName
      },
      select() {
        uni.setStorageSync('selectCinema', this.cinemaInfo)
        console.log('this.cinemaInfo', this.cinemaInfo)
        this.$tools.navigateTo(-1)
      },
      showCinema(item) {
        if (!this.selectCinemaName || item.cinemaName.includes(this.selectCinemaName)) {
          return true
        } else {
          console.log('cinemaName false')
          return false
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .film-page {
    display: flex;
    height: 100vh;
    flex-direction: column;
    padding-bottom: 20rpx;
    width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  .city-choose {
    height: 160rpx;
  }
  .cinema-item {
    margin: 30rpx 30rpx 0 30rpx;
    padding: 30rpx;
    box-sizing: border-box;
    background: #fff;
    border: solid 1rpx #fff;
    border-radius: 20rpx;
  }
  .cinema-item-check {
    border: solid 1rpx #44c9f2;
  }
  .film-content {
    width: 100%;
    overflow-x: hidden;
    flex: 1;
    background: #f3f5f7;
    // border-radius: 30rpx 30rpx 0 0;
  }
  .film-date-scroll {
    width: 100%;
    height: 40px;
    overflow-x: hidden;
    background: #fff;
    padding: 0 30rpx;
    white-space: nowrap;
    box-sizing: border-box;
    border-radius: 30rpx 30rpx 0 0;
    border-bottom: solid 1rpx #eee;
  }
  .tip {
    background-color: #fdf7d7;
    color: #f8a82d;
    font-size: 24rpx;
    padding-left: 30rpx;
    line-height: 60rpx;
    box-sizing: border-box;
    border-radius: 16rpx;
    height: 60rpx;
    margin: 20rpx 0;
  }
  .search {
    background: #fff;
    padding: 19rpx 20rpx 23rpx 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1rpx solid #f3f5f7;
    border-bottom: 1rpx solid #f3f5f7;
  }
  .input {
    margin-right: 10rpx;
    display: flex;
    width: 560rpx;
    height: 72rpx;
    padding-right: 22rpx;
    padding-left: 30rpx;
    background: #f3f5f7;
    border-radius: 20rpx;
  }
  .uipt {
    margin-right: 10rpx;
    flex: 1;
  }
  .bind-btn {
    width: 130rpx;
    height: 68rpx;
    background: linear-gradient(135deg, #55baff 0%, #34f6af 100%);
    border-radius: 20rpx;
    font-size: 28rpx;
    color: #ffffff;
    line-height: 68rpx;
    text-align: center;
  }
</style>
